colors {
    backgroundColor: white;              /* blue */
    selectColor: #dcddde;        /* black */
    brightBgColor: #009ee8;      /* brighter blue */
    borderColor: #324a80;        /* border color */
    tfborderColor: #324a80;        /* border color */
    fontColor: black;
    fontSelectColor: #324a80;    /* white */
    menuFontColor: #5468a3;
    menuSelectColor: #6d8bf2;
    titleFontColor: white;
    titleLeftColor: #324a80;
    titleRightColor: #4488c4;
    tickerFontColor: #324a80;
    splColor1: #00aff0;
    splColor2: #b2e8fa;
}
info {
    border-color: borderColor;
    border-type: simple;
    border-width: 1;
    font-style: plain;
    font-face: proportional;
    font-size: small;
    font-color: fontColor;
    layout: right;
}
title {
    padding-top: 5;
    padding-left: 5;
    background {
        type: horizontal-gradient;
        left-color: titleLeftColor;
        right-color: titleRightColor;
        start: 0%;
        end: 100%;
    }
    font-color: titleFontColor;
    font-style: bold;
    font-size: large;
    font-face: proportional;
    layout: center|expand;
}
menu {
    margin-left: 4;
    margin-right: 4;
    margin-bottom: -4; /* for the border */
    min-width: 100;
    padding: 2;
    font-color: white;
    menubar-color: borderColor;
    font-size: medium;
    font-style: bold;
    view-type: numbered;
    border {
        width: 2;
        color: menuFontColor;
        type: round-rect;
        orientation: top-right;
    }
    background-color: brightBgColor;
}
menuItem {
    padding: 3;
    padding-left: 10;
    padding-right: 10;
    font {
        color: menuFontColor;
        size: medium;
        style: bold;
    }
    layout: left;
    label-style: menuLabel;

}

.menuItem:hover {
    padding: 2;
    padding-left: 9;
    padding-right: 9;
    background {
        type: round-rect;
        color: menuSelectColor;
    }
    font {
        style: bold;
        size: medium;
        color: white;
    }
    layout: left | horizontal-expand;
    label-style: menuLabelFocused;
    include-label: true;

}

.menuLabel {
    padding: 3;
    font-color: menuFontColor;
    font-style: bold;
}

.menuLabelFocused {
    padding: 2;
    font-color: white;
    font-style: bold;
    border {
        type: circle;
        width: 1;
        color: white;
    }
}

.mainScreen{
    padding-top: 10;
    background-color: backgroundColor;
    font-color: fontColor;
    scrollindicator-up-image: url( up.png );
    scrollindicator-down-image: url( down.png );
}
.defaultScreen{
    padding-top: 5;
    background-color: backgroundColor;
    font-color: fontColor;
    scrollindicator-up-image: url( up.png );
    scrollindicator-down-image: url( down.png );
}
.progressScreen{
    padding-top: 20;
    background-color: backgroundColor;
    font-color: fontColor;
    layout: horizontal-expand | vertical-expand;
}
.imageScreen {
    background-color: borderColor;
    layout: horizontal-expand | horizontal-center | vertical-expand | vertical-center;
}
.mainItem {
    padding-left: 5;
    font-color: fontColor;
    font-style: bold;
    font-size: large;
    layout: vertical-center | horizontal-expand ;
}
.mainItem:hover{
    padding-left: 5;
    background-color: selectColor;
    font-style: bold;
    font-color: fontSelectColor;
    font-size: large;
    layout: vertical-center | horizontal-expand ;
}
.textfieldItem {
    padding-left: 5;
    font-color: black;
    font-style: plain;
    border: none;
    layout: left | expand;
    label-style: textFieldLabel;
}
.textfieldItem:hover {
    padding-left: 5;
    font-style: bold;
    font-color: fontSelectColor;
    border-color: tfborderColor;
    background-color: selectColor;
    label-style: textfieldLabelHover;
    layout: left | expand;
}
.textfieldLabel {
    font-color: black;
    padding-left: 5;
    font-style: plain;
    layout: left | expand;
}
.textfieldLabelHover{
    padding-left: 5;
    font-color: menuFontColor;
    font-style: bold;
    background-color: selectColor;
    layout: left | expand;
}
.stringitemItem {
    padding-left: 5;
    padding-right: 5;
    font-color: black;
    font-style: plain;
    border: none;
    layout: left;
    label-style: stringitemLabel;
}
.stringitemLabel {
    font-color: black;
    padding-left: 3;
    margin-right: 3;
    font-style: plain;
    layout: left;
}
.confirmationAlert{
    background-color: backgroundColor;
    title-style: none;
    font-color: menuFontColor;
    layout: bottom;
    repaint-previous-screen: false;
}
.alertGradient {
    title-style: none;
    font-color: menuFontColor;
    font-size: medium;
    font-style: bold;
    padding-top: 20;
    padding-left: 5;
    padding-right: 5;
    padding-bottom: 20;
    border {
        width: 2;
        type: round-rect;
        color: menuFontColor;
        arc: 5;
    }
    layout: bottom | expand  | left | vertical-shrink;
    background-color: selectColor;
}
.incrementIndicator {
    padding-left: 5;
    gauge-mode: continuous;
    gauge-show-value: false;
    max-width: 140;
    gauge-color: borderColor;
    gauge-height: 10;
    layout: left;
    include-label: false;
}
.mainscreen1 {
    padding: 2;
    padding-left: 10;
    padding-right: 10;
    background-color: gray;
    layout: horizontal-expand | horizontal-center | vertical-center;
    font {
        face: proportional;
        size: medium;
        style: bold;
        color: gray;
    }
    view-type: grayout;
}
.mainCommand {
    padding: 0;
    padding-vertical: 0;
    /*icon-image: url( iconlarge%INDEX%.png );*/
    icon-image-align: top;
    layout: center;
}
.mainCommand:hover {
    font-style: bold;
    font-size: medium;
    font-color: white;
    /*text-effect: shadow;*/
}
.mainCommand:pressed {
    view-type: particle;
}
/** tab bar styles **/
.tabbedForm {
    padding-top: 5;
    padding-left: 2;
    padding-right:5;
    padding-bottom:5;
    background-top: title;
    background-bottom: menubar;
    background-color: white;
    scrollindicator-up-image: url( up.png );
    scrollindicator-down-image: url( down.png );
    title-style: solidTitle;
}
tabbar {
    background-color: selectColor;/*#fa9104*/
    layout: expand;
    tabbar-left-arrow: url( left.png );
    tabbar-right-arrow: url( right.png );
    tabbar-roundtrip: true;
}
activetab {
    padding-left: 3;
    padding-right: 3;
    background-type: round-tab;
    background-color: white;
    background-arc: 8;
    font-color: black;
    font-size: small;
    font-style: bold;
}
inactivetab {
    margin-left: 2;
    margin-right: 2;
    padding-top: 2;
    padding-left: 2;
    padding-right: 2;
    background-type: round-tab;
    background-color: selectColor;/*#fa9104*/
    background-arc: 4;
    font-color: black;
    font-size: small;
    font-style: plain;
}
.solidTitle extends title {
    background-color: selectColor;/*#fa9104*/
}
.accountTree {
    padding-left: 5;
    margin-left: 0;
    padding-vertical: 3;
    padding-horizontal: 0;
    treeitem-closed-indicator: url( right.png );
    treeitem-opened-indicator: url( down.png );
}
.accounts {
    margin: 0;
    padding-left: 5;
    padding-right: 5;
    margin-right: 10;
    background-color: white;
    font-size: medium;
    font-style: bold;
    font-size: medium;
    font-color: fontColor;
    layout: expand | left;
}
.accounts:hover {
    margin: 0;
    margin-right: 10;
    padding-left: 5;
    padding-right: 5;
    background-color: selectColor;
    font-color: menuSelectColor;
    font-style: bold;
    font-size: medium;
    border-type: round-rect;
    border-color: menuSelectColor;
    border-orientation: all-sides;
}
.contacts {
    padding-left: 5;
    background-type: round-rect;
    background-color: white;
    font-style: plain;
    font-size: small;
    font-color: fontColor;
    layout: expand | left;

}
.contacts:hover {
    padding-right: 10;
    font-color: fontColor;
    font-style:bold;
    background-color: selectColor;
    background-border-color: selectColor;
    background-border-width: 1;
}
.myChats {
        margin-right: 30;
        padding-left: 5;
        padding-right: 5;
	background-color: #ffed8e;
        border-color: #ffed8e;
        border-type: round-rect;
	font-size: small;
        font-color: black;
        /*text-effect: smiley;*/
        label-style:myChatlabel;
        layout: left|expand;
}
.buddyChats {
        margin-left: 30;
        padding-left: 5;
        padding-right: 5;
	background-color: #ffc9bb;
        border-color: #ffc9bb;
        border-type: round-rect;
        /*text-effect: smiley;*/
        font-size: small;
	font-style: plain;
        layout: left|expand;
        label-style:buddyChatlabel;
}
myChatlabel{
    margin-right: 30;
    padding-left: 5;
    font-color: black;
    border-color: #ffed8e;
    border-type: round-rect;
    /*text-effect: smiley;*/
    font-size: small;
    font-style: plain;
    layout: left|expand;
    background {
        type: vertical-gradient;
        top-color: #00b228;
        bottom-color: #b1e856;
        start: 0%;
        end: 100%;
    }
}
buddyChatlabel{
    margin-left: 30;
    padding-left: 5;
    font-color: black;
    border-color: #bababa;
    border-type: round-rect;
    /*text-effect: smiley;*/
    font-size: small;
    font-style: plain;
    layout: left|expand;
    background {
        type: vertical-gradient;
        top-color: #4c84b8;
        bottom-color: #b2e5fa;
        start: 0%;
        end: 100%;
    }
}
.buddyImChats{
    margin-left: 30;
    padding-left: 5;
    font-color: black;
    background-color: #dfdfdf;
    font-size: small;
    font-style: plain;
    layout: left|expand;
}
.myImChats {
        margin-right: 30;
        padding-left: 5;
        padding-right: 5;
	background-color: #dfdfdf;
	font-size: small;
        font-color: black;
        layout: expand;
}
.itemTextInput {
    margin: 2;
    background-color: backgroundColor;
    border-color: borderColor;
    font-color: fontColor;
    layout: expand | left;
    textfield-direct-input: true;
    textfield-show-length: false;
    textfield-caret-color: fontColor;
    label-style:labelTextInput
}
.itemTextInput:hover {
    margin: 2;
    padding-left: 5;
    padding-right: 5;
    background-color: backgroundColor;
    border-color: borderColor;
}
labelTextInput{
    margin-left: 2;
    padding-left: 5;
    padding-right: 5;
    font-color: fontColor;
    font-size: medium;
    font-style: plain;
    layout: left;
}
.message {
    margin: 2;
    border-type: round-rect;
    border-color: gray;
    background-color: splColor1;
}
.messagescreen {
    padding: 2;
    background {
        type: vertical-gradient;
        top-color: splColor1;
        bottom-color: splColor2;
        start: 0%;
        end: 100%;
    }
    scrollindicator-up-image: url( up.png );
    scrollindicator-down-image: url( down.png );
}
messageheadline {
    padding-left: 3;
    icon-image: url( contacts.png );
    icon-image-align: left;
    layout: expand | bottom;
    font-color: white;
    font-size: large;
    font-style: bold | underlined;
}
messagetext {
    font-color:  white;
    font-size: large;
    layout: expand | left;
}
.progrescreen {
    padding-top: 20;
}
.busyIndicator {
    layout: center;
    view-type: gauge-cycling-icons;
    gauge-cycling-icons-image: url( c2.png );
    gauge-cycling-icons-highlight-image: url( c5.png );
    gauge-cycling-icons-highlight-center-image: url( c1.png );
    gauge-cycling-icons-count: 10;
    gauge-cycling-icons-highlight-count: 3;
}
